<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎登录XXX系统</view>
			<input class="u-border-bottom" v-model="form.usernameemail" placeholder="请输入账户(用户名或邮箱)" />
			<input class="u-border-bottom" type="password" v-model="form.password" placeholder="请输入密码" />
			<button @click="login" class="">登录</button>
			<view class="alternative">
				<view class="password">找回密码</view>
				<view class="issue" @click="toRegister">注册</view>
			</view>

			<view style="color: #DD524D;">这里是登陆页面: 用户通过用户名(邮箱)、密码进行登录</view>
			<view style="color: #DD524D;">现在实现了很简单的登录</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import {mapGetters, mapMutations} from 'vuex';
	import {APILogin} from '../../config/api.js';
	
	export default {
		data() {
			return {
				form: {
					usernameemail: '', // 用户名或者邮箱
					password: '', // 密码
				},
			}
		},
		computed: {
			...mapGetters(['user']),
		},
		created() {
			
		},
		methods: {
			...mapMutations(['setToken'], ['setUser']),
			
			// TODO 根据token拿到用户的个人信息
			getPersonInfo(){
				
			},
			
			// 登录
			login() {
				console.log("点击登陆");
				
				// 获取表单数据
				const params = {
					usernameemail: this.form.usernameemail,
					password: this.form.password
				}
				
				// 登陆
				APILogin(params).then(res => {
					console.log(res);
					console.log(res.token);
					this.$u.toast("登录成功")
					// 全局保存token
					this.setToken(res.token);
					// 延时跳转
					setTimeout(function(){
						// 跳转到首页
						uni.$u.route({
							type: 'reLaunch',
							url: 'pages/index/index'
						})
					}, 3000)
				}).catch(err => {
					console.log(err);
					this.$u.toast("登录失败: " + err.data.data.message)
				})
								
				
			},
			
			// 跳转到注册页面
			toRegister(){
				console.log("点击注册");
				this.$u.route({
					url: 'pages/auth/register'
				})
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.u-border-bottom {
		margin-bottom: 40rpx !important;
	}

	.wrap {
		font-size: 28rpx;

		.content {
			width: 88%;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				//color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.getCaptcha {
				background-color: rgb(253, 243, 208);
				//color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}
		}
	}
	
	.alternative {
		//color: $u-tips-color;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
</style>
